<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa - Food Ordering, Delivery & Restuarent Template</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="static/css/animate.min.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/magnific.min.css">
    <link rel="stylesheet" href="static/css/nice-select.min.css">
    <link rel="stylesheet" href="static/css/owl.min.css">
    <link rel="stylesheet" href="static/css/slick-slide.min.css">
    <link rel="stylesheet" href="static/css/fontawesome.min.css">
    <link rel="stylesheet" href="static/css/remixicon.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/responsive.css">

    <!--Google Fonts-->
    <link href="static/css/css2.css" rel="stylesheet">
    <script src="static/js/jquery-3.3.1.js"></script>
    <script src="static/js/getParameter.js"></script>
    <script>
        $(function (){
            var diff_id = getParameter("diff_id");
            var currentPage = getParameter("currentPage");
            load(diff_id,currentPage);
            $("#word").keyup(function (){
                $.get("/Pizza_war_exploded/Food/foodShowByFname",
                    {fname:$("#word").val()},
                    function (data){
                        $("#pnameList").empty();
                        for (var i = 0;i< data.list.length ; i++) {
                            if(i<=10){
                                $div = $("<div class="+"divItem"+">"+data.list[i].fname+"</div>");
                                $div.mouseover(function (){
                                    $(this).css("background-color","gray")
                                });
                                $div.mouseout(function (){
                                    $(this).css("background-color","white")
                                });
                                $div.click(function (){
                                    $("#word").val($(this).html())
                                });
                                $("#pnameList").append($div);
                            }
                        }
                    },"json")
            })
            $("#submit1").click(function (){
                $.get("/Pizza_war_exploded/Food/foodShowByFname",
                    {fname:$("#word").val()},
                    function (data){
                    if (data.list.length==1){
                        location.href="single-product.html?fid="+data.list[0].fid;
                    }
                    },"json")
            })
        })

        function load(diff_id,currentPage){
            $.post("/Pizza_war_exploded/Food/foodShowByType",
                {diff_id : diff_id,currentPage :currentPage},
                function (data){
                    var listText = "";
                    for (var i = 0; i < data.list.length; i++) {
                        listText += '<div class="col-lg-4 col-md-6">\n' +
                            '                <div class="single-item-wrap">\n' +
                            '                    <div class="thumb">\n' +
                            '                        <img src="'+data.list[i].food_img.pic +'" alt="img">\n' +
                            '                    </div>\n' +
                            '                    <div class="wrap-details">\n' +
                            '                        <h5><a href="single-product.html">'+ data.list[i].fname+'</a></h5>\n' +
                            '                        <div class="wrap-footer">\n' +
                            '                            <div class="rating">\n' +
                            '                                '+data.list[i].evalSum+'\n' +
                            '                                <span class="rating-inner">\n'
                        for (var j = 0; j <  parseInt(data.list[i].evalSum) ; j++) {
                            listText +=' <i class="ri-star-fill"></i>\n'
                        }
                        listText +=  '                                    </span>\n' +
                            '                                ('+data.list[i].evalTime+')\n' +
                            '                            </div>\n' +
                            '                            <h6 class="price">$'+ data.list[i].price+'</h6>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                    <div class="btn-area">\n' +
                            '                        <a class="btn btn-secondary" href="single-product.html?fid='+data.list[i].fid+'">查看详情 </a>\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '            </div>'
                    };
                    var start = data.currentPage - 5;
                    var end = data.currentPage + 4;
                    if (start < 1) {
                        start = 1;
                        end = 10;
                    }
                    if (end > data.totalPage) {
                        end = data.totalPage;
                        start = end - 9;
                    }
                    if (data.totalPage < 10) {
                        start = 1;
                        end = data.totalPage;
                    }
                    var prePage = data.currentPage - 1;
                    if (prePage < 1) {
                        prePage = 1;
                    }
                    var nextPage = data.currentPage + 1;
                    if (nextPage > data.totalPage) {
                        nextPage = data.totalPage;
                    }
                    listText +='<div class="col-12">\n' +
                        '                <nav>\n' +
                        '                    <ul class="pagination">\n' +
                        '                        <li class="page-item">';
                    listText +='<a class="page-link" href="javascript:load('+diff_id+','+prePage+')">'
                    listText +='  <i class="ri-arrow-left-s-line"></i>\n' +
                        '                            </a>\n' +
                        '                        </li>';
                     for (var j = start; j <= end ; j++) {
                         if (data.currentPage == j){
                             listText +='<li class="page-item active"><a class="page-link" href="javascript:load('+diff_id+','+j+')">'+j+'</a></li>';
                         }else {
                             listText +='<li class="page-item"><a class="page-link" href="javascript:load('+diff_id+','+j+')">'+j+'</a></li>';
                         }
                     };
                    listText +='<li class="page-item">';
                    listText +='<a class="page-link" href="javascript:load('+diff_id+','+nextPage+')">'
                    listText +='<i class="ri-arrow-right-s-line"></i>\n' +
                        '                            </a>\n' +
                        '                        </li>\n' +
                        '                    </ul>\n' +
                        '                </nav>\n' +
                        '            </div>';
                    $("#list").html(listText);
                },"json")

        }
    </script>
    <style>
        #pnameList{
            width: 548px;
            background-color: white;
            z-index: 1000;
            position: absolute;
        }
        .divItem{
            cursor: pointer;
            padding-left: 28px;
        }
    </style>
</head>
<body class='sc5'>
<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="preloader-inner">
        <div id="wave1">
        </div>
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->
<!-- search popup area start -->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
    <div class="search-form">
        <div class="form-group">
            <input type="text" id="word"  class="form-control" placeholder="Search.....">
        </div>
        <button type="submit" id="submit1" class="submit-btn"><i class="fa fa-search"></i></button>
        <div id="pnameList"></div>
    </div>
</div>
<!-- //. search Popup -->

<!-- navbar start -->
<div id="header"></div>
<!-- navbar end -->

<!-- bredcrumb Area Start-->
<section class="breadcrumb-area">
    <div class="banner-bg-img"></div>
    <div class="banner-shape-1"><img src="static/picture/shape-1.png" alt="img"></div>
    <div class="banner-shape-2"><img src="static/picture/shape-2.png" alt="img"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 align-self-center">
                <div class="banner-inner text-center">
                    <h3>Choose you items
                    </h3>
                    <h1>OUR MENU</h1>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Menu Tab</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- bredcrumb Area End -->

<!-- category Area Start-->
<section class="category-area">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12 align-self-center" style="margin: 0 auto">
                <ul class="category-menu" id="menuLi">
                    <li class="category-wrap">
                        <a href="menu.html?diff_id=3">
                        <img src="static/picture/24.png" alt="category">招牌披萨</a>
                    </li>
                    <li class="category-wrap">
                        <a href="menu.html?diff_id=1">
                            <img src="static/picture/35.png" alt="category">美味汉堡</a>
                    </li>
                    <li class="category-wrap">
                        <a href="menu.html?diff_id=4">
                            <img src="static/picture/52.png" alt="category">缤纷小食</a>
                    </li>
                    <li class="category-wrap">
                        <a href="menu.html?diff_id=2">
                        <img src="static/picture/62.png" alt="category">清凉酷饮</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- category Area End -->

<!-- populer Area Start-->
<section class="populer-area pd-top-50 pd-bottom-120">
    <div class="container">
        <div class="row justify-content-center" id="list">
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/15.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Margherita Pizza</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (200)
                            </div>
                            <h6 class="price">$17.00</h6>
                        </div>
                    </div>
                    <div class="btn-area">
                        <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/25.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Maxican Pizza Test Better</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (928)
                            </div>
                            <h6 class="price">$29.00</h6>
                        </div>
                        <div class="btn-area">
                            <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/34.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Roasted Garlic Chicken Pizza </a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (462)
                            </div>
                            <h6 class="price">$27.00</h6>
                        </div>
                    </div>
                    <div class="btn-area">
                        <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/45.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">All Season Gulliver Pizza</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (462)
                            </div>
                            <h6 class="price">$29.00</h6>
                        </div>
                    </div>
                    <div class="btn-area">
                        <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/53.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Chicken Fajita Pizza Large</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (200)
                            </div>
                            <h6 class="price">$29.00</h6>
                        </div>
                        <div class="btn-area">
                            <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/63.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">BBQ Chicken Classic Pizza Large</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (602)
                            </div>
                            <h6 class="price">$27.00</h6>
                        </div>
                    </div>
                    <div class="btn-area">
                        <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/16.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Patty Buns Burgers</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (462)
                            </div>
                            <h6 class="price">$27.00</h6>
                        </div>
                    </div>
                    <div class="btn-area">
                        <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/29.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Double Burger</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (928)
                            </div>
                            <h6 class="price">$29.00</h6>
                        </div>
                        <div class="btn-area">
                            <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-item-wrap">
                    <div class="thumb">
                        <img src="static/picture/16.png" alt="img">
                        <a class="fav-btn" href="#"><i class="ri-heart-line"></i></a>
                    </div>
                    <div class="wrap-details">
                        <h5><a href="single-product.html">Patty Buns Burgers</a></h5>
                        <div class="wrap-footer">
                            <div class="rating">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                (462)
                            </div>
                            <h6 class="price">$27.00</h6>
                        </div>
                    </div>
                    <div class="btn-area">
                        <a class="btn btn-secondary" href="single-product.html">CHOOSE OPTIONS </a>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <nav>
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#">
                                <i class="ri-arrow-left-s-line"></i>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">
                                <i class="ri-arrow-right-s-line"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>
<!-- populer Area End -->

<!-- footer area start -->
<div id="footer"></div>
<!-- footer area end -->

<!-- back-to-top end -->
<div class="back-to-top">
    <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
</div>



<!-- all plugins here -->
<script src="static/js/jquery.3.6.min.js"></script>
<script src="static/js/jquery-ui.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/imageloded.min.js"></script>
<script src="static/js/counterup.js"></script>
<script src="static/js/waypoint.js"></script>
<script src="static/js/magnific.min.js"></script>
<script src="static/js/isotope.pkgd.min.js"></script>
<script src="static/js/nice-select.min.js"></script>
<script src="static/js/fontawesome.min.js"></script>
<script src="static/js/owl.min.js"></script>
<script src="static/js/slick-slider.min.js"></script>
<script src="static/js/wow.min.js"></script>
<script src="static/js/tweenmax.min.js"></script>
<!-- main js  -->
<script src="static/js/main.js"></script>
<script type="text/javascript" src="static/js/include.js"></script>
</body>
</html>